<template>
	<default-header-page-layout ref="page" title="收货执行">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<scan-input-form-item :msgType='msgType' class="forma-item" label="单据编号" v-model="form.no" :msg="msg"
					 @search="onSearchContainter" @clear="onClearContainter" />
				<view class="scan-input-form-item-compontent" v-show="noAllData.length>0">
					<view class="p-form-label"></text>物料明细</view>
					<!-- <view class="input-view">
						<u-search 
						clearabled
						@search="search"
						@custom="search"
						@clear="clear"
						searchIcon="" 
						:actionStyle="actionStyle" 
						bgColor="#fff" 
						shape="square" 
						placeholder=""
						height="58rpx"
						v-model="form.materialNo"></u-search>
					</view> -->
				</view>
				<view v-if="true">
					<view v-for="(item,index) in noData" :key="index">
						<bar-content @checkChange="checkChange" :index="index" :content="item"></bar-content>
					</view>

				</view>
			</view>


		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view style="margin-right:10rpx" class="btn-frame">
					<u-button :disabled="disabled" type="primary" text="收 货" @click="recieve">
					</u-button>
				</view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
	import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
	import EasyPicker from '@/components/EasyPicker.vue'
	import {
		GetOrderDetail,
		confirmReceipt
	} from '@/api/receiptExecution.js'
	let initInterVal = null;

	import barContent from './modules/barContent.vue'

	export default {
		name: 'emptyInPage',
		components: {
			barContent,
			DefaultHeaderPageLayout,
			ActionUserRow,
			ScanInputFormItem,
			EasySelectFormItem,
			EasyPicker
		},
		data() {
			return {
				pageBodyHeight: 0,
				form: {
					no: '',
					materialNo: ''
				},
				msg: '',
				msgType: 'info',
				noAllData:[],
				noData: [],
				actionStyle: {
					backgroundColor: '#F18202',
					color:'#fff',
					width: 120 + 'rpx',
					height: 58 + 'rpx',
					lineHeight: 58 + 'rpx',
					borderRadius: 10 + 'rpx'
				}
			}
		},
		computed: {
			disabled() {
				return this.noData.filter(item => item.checked).length < 1
			}
		},
		watch: {
			'form.no': {
				handler(val) {
					if (val == '') {
						this.onClearContainter()
					}
				}
			},
			'form.materialNo':{
				handler(val) {
					if (val == '') {
						this.clear()
					}
				}
			}
		},
		methods: {
			// 获取单据信息
			async onSearchContainter(no) {
				if (no) {
					this.form.no = no
				}
				const param = {
					no: this.form.no
				}
				try {
					let data = await GetOrderDetail(param)
					if (Object.keys(data).includes('message')) {
						this.msg = data.message
						this.msgType = 'error'
					} else {
						console.log(66666666666);
						console.log(data);
						this.noAllData = data
						this.noAllData.forEach(item => this.$set(item, 'checked', true))
						this.noData=this.noAllData
					}

				} catch (e) {
					//TODO handle the exception
					console.log(e, 'e');
				}
			},
			// 清除单据信息
			onClearContainter() {
				this.form={
					no :'',
					materialNo:''
				}
				this.noData = []
				this.noAllData=[]
				this.msg = ''
				this.msgType = 'info'
			},
			// 收货
			async recieve() {
				const data = this.noData.filter(item => item.checked)
				var content = ''
				let result = data.filter(item => item.receivedQty > item.deliveryQty)
				if (result.length > 0) {
					content = `物料${result[0].materialname}收货数量大于送货数量，确定执行收货操作吗？`
				} else {
					content = '确定执行收货操作吗？'
				}
				uni.showModal({
					title: '收货确认',
					content,
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: async (type) => {
						let {
							confirm,
							cancel
						} = type
						if (confirm) {
							const res = this.noData.filter(item => item.checked)
							let data = {
								no: this.form.no,
								getOrderDetailOutputList: res
							}

							try {
								await confirmReceipt(data)
								uni.showToast({
									title: '出货成功',
									success: () => {
										this.onClearContainter()
										this.form={
											no :'',
											materialNo:''
										}
									}
								})

							} catch (e) {
								//TODO handle the exception
								console.log(e);
							}
						}
					}
				})

				// this.onClearContainter()
				// this.onClearNO()
			},
			// 切换选中
			checkChange(item) {
				item.checked = !item.checked
			},
			// 模糊查询
			search(val){
				val=val.trim()
				if(val!='') {
					const result=this.noAllData.filter(item=>item.materialcode.indexOf(val)!=-1)
					this.noData=result.length>0?result:[]
				}else {
					this.noData=this.noAllData
				}
				
			},
			clear(){
				this.form.materialNo=''
			},
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			}
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
				// this.getLinesOptions()
				// this.selectOptions.models = getDicList(this.$store,'assemble_taskmodel')
			})
		},
		onUnload() {
			this.clearInitInterval()
		}
	}
</script>

<style scoped lang="scss">
	.forma-item {
		margin-bottom: 24rpx;
	}

	.only-watch-container {
		background-color: #D0DDD8;
		min-height: 90rpx;
		display: flex;

		&>.label {
			color: $u-tips-color;
			font-size: 32rpx;
			flex-shrink: 0;
			padding-left: 20rpx;
			padding-top: 22rpx;
		}

		&>.content {
			width: 1px;
			flex-grow: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			padding: 8rpx 0;
		}
	}

	.bottom-btns-row {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.btn-frame {
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}
	}

	.scan-input-form-item-compontent {
		width: 100%;

		.p-form-label {
			font-size: 32rpx;
			color: $u-tips-color;
			padding-bottom: 12rpx;
			padding-left: 20rpx;
		}

		.input-view {
			padding-left: 20rpx;
			width: 93%;
		}

	}

	::v-deep .u-search__content {
		padding: 0 !important;
	}
</style>